<template>
	<view>
		<view :style="{height: (statusBarHeight) + 'px'}"></view>
		<u-swiper :list="list1" indicator indicatorMode="line" circular :height='220'></u-swiper>
		<view class="substance">
			<view class="box" style="margin-left: 18rpx;" @click="onRaise()">
				<image src="https://img.wilmer.com.cn/admin/2024/3-31/Group%20323.png" mode=""></image>
				<text>养征信</text>
			</view>
			<view class="box" @click="onVideo()">
				<image src="https://img.wilmer.com.cn/admin/2024/3-31/Group%20322.png" mode=""></image>
				<text>教征信</text>
			</view>
			<view class="box" style="margin-right: 18rpx;" @click="onclick()">
				<image src="https://img.wilmer.com.cn/admin/2024/3-31/Vector.png" mode=""></image>
				<text>金融顾问</text>
			</view>
		</view>
		<image class="footImg" src="https://img.wilmer.com.cn/admin/2024/3-31/Vector_bottom.png" mode=""></image>
		<view :style="{height: safeArea + 'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 44, // 导航栏高度
				safeArea: 0, // 底部安全距离
				// 轮播图
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			};
		},
		onShow() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			// 获取底部安全距离
			let res = uni.getSystemInfoSync();
			this.safeArea = res.screenHeight - res.safeArea.bottom;
		},
		methods: {
			onRaise() {
				uni.navigateTo({
					url: '/pages/my-set/index'
				})
			},
			onclick() {
				uni.navigateTo({
					url: '/pages/Login/Login-shortcut'
				})
			},
			onVideo() {
				uni.navigateTo({
					url: `/pages/knowledge/VideoList`
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: auto;
		background: #FFF;
		overflow-x: hidden;
	}
</style>

<style lang="scss" scoped>
	.uni-ellipsis-2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.substance {
		width: 688rpx;
		height: calc(515px - 76px);
		padding-top: 152rpx;
		border-radius: 10px 10px 0px 0px;
		background-color: #fff;
		box-shadow: 0px -1px 4px 0px #00000026;
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;

		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 120rpx;
				height: 120rpx;
			}

			text {
				line-height: 1;
				font-family: PingFang SC;
				font-size: 40rpx;
				font-weight: 400;
				margin-top: 28rpx;
			}
		}
	}

	.footImg {
		width: 100vw;
		height: 378rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>